<template>
  <view ref="refGroupContent" class="group-content">
    <view ref="refGroupBox" class="wj-radio-group" style="height: auto">
      <slot></slot>
    </view>
  </view>
</template>
<script setup lang="ts">
import { computed, provide, ref } from 'vue';
const emits = defineEmits(['update:select', 'change']);

const props = defineProps<{
  type: 'radio' | 'multiple';
  select?: string | number | (string | number)[] | undefined;
}>();
const radioGroupModelValue = computed(() => props.select);
const refGroupContent = ref();
const refGroupBox = ref();

const updateRadioGroupModelValue = (e: any) => {
  if (props.type === 'radio') {
    emits('update:select', e);
    emits('change', e);
  } else {
    let selectValue: (string | number)[] | undefined =
      (props.select as (string | number)[]) ?? [];
    // selectValue = e ?? []

    const index = selectValue?.findIndex((item) => item === e);
    if (index > -1) {
      if (selectValue.length > 1) {
        selectValue.splice(index, 1);
      }
    } else if (!e) {
      selectValue = undefined;
    } else {
      selectValue.push(e);
    }
    emits('update:select', selectValue);
    emits('change', selectValue);
  }
};
provide('radioGroupModelValue', {
  type: props.type,
  radioGroupModelValue,
  updateRadioGroupModelValue,
});
</script>
<style lang="scss" scoped>
.group-content {
  overflow: hidden;
  .wj-radio-group {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
